<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/formstyle.css">
    <script src="/js/jquery.js"></script>
    <style>
        .top-buffer1{
            margin-top: 20px;
        }
        .top-buffer2{
            margin-top: 10px;
        }
        body{
            background-image: url("../img/twos.svg");
            background-size: cover;
        }
    </style>
</head>
<body>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title top-buffer1" style="text-align: center">用户信息</h3>
    </div>
    <br>
    <div style="text-align: center;z-index: -1;">
        <img class="logo" th:src="${session.user.userimage}" onclick="rua()" id="logo">
    </div>

<!--    <div id="logo" class="logo" onclick="rua()"></div>-->
<!--    <div id="x" class="x" onclick="x()"></div>-->
    <br> <!--action="/user/changeInfo"-->
    <div style="position: absolute; left: 25px">
        <form  class="row g-3" id="userInfo" enctype="multipart/form-data" style="border: none">

            <input type="file" class="" id="a_userAvatar" name="userImg" accept="image/*" style="display: none" onchange="image233(this)" >

            <div class="row top-buffer1">
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <label for="user_name" class="form-label">用户名</label>
                    <input id="user_name" class="form-control" name="user_name" th:value="${session.user.username}" >
                </div>
                <div class="col-md-2">
                    <label for="user_gender" class="form-label">性别</label>
                    <input id="user_gender" class="form-control" name="user_gender" th:value="${session.user.usergender}" >
                    <!--                    <div class="col-md-2"></div>-->
                </div>
            </div>

            <div class="row top-buffer1">
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <label for="user_job">职业</label>
                    <input id="user_job" class="form-control top-buffer" name="user_job" th:value="${session.user.userjob}" >
                </div>
                <div class="col-md-2">
                    <label for="user_code">身份证号</label>
                    <input id="user_code" class="form-control top-buffer" name="user_code" th:value="${session.user.usercode}" >
                </div>
            </div>

            <div class="row top-buffer1">
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <label for="user_realname">真实姓名</label>
                    <input id="user_realname" class="form-control top-buffer" name="user_realname" th:value="${session.user.userrealname}" >
                </div>
                <div class="col-md-2">
                    <label for="user_tel">手机号</label>
                    <input id="user_tel" class="form-control top-buffer" name="user_tel" th:value="${session.user.usertel}" >
                </div>
            </div>

            <div class="row top-buffer1">
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <label for="user_grade">信用积分</label>
                    <input id="user_grade" class="form-control top-buffer" name="user_grade" th:value="${session.user.usergrade}" disabled >
                </div>
                <div class="col-md-2">
                    <label for="user_email">邮箱</label>
                    <input id="user_email" class="form-control top-buffer" name="user_email" th:value="${session.user.useremail}" >
                </div>
            </div>


            <div class="row top-buffer1">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <label for="user_signature">个性签名</label>
                    <textarea class="form-control top-buffer2" rows="3" placeholder="请输入内容" id="user_signature" name="user_signature"
                              th:text="${session.user.usersignature}" ></textarea>
                </div>
            </div>
            <div style="text-align: center"><br>
                <div style="width: 100px;
                        height: 30px;border: 2px black solid;border-radius: 10px;position:absolute;left: 40%">
                    <a style="border: none;background: none;color: black" onclick="changeUserInfo()" href="#"><p style="color: black">提交</p></a>
                </div>
                <div style="width: 100px;
                        height: 30px;border: 2px black solid;border-radius: 10px;position:absolute;left: 52%"><a href="javascript:loadPage('/user/toUserInfo');" style="text-decoration: none" ><p style="color: black">取消修改</p></a></div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>

        </form>
    </div>

    </div>
<script>
    function rua(){
        document.getElementById("a_userAvatar").click();
    }
    function image233(file){
        var img = null;
        img = window.URL.createObjectURL(file.files[0]);

        if(file.files[0].size<1048576){
            document.getElementById("logo").src=img;
        }
        else {
            alert("图片过大");
            document.getElementById("a_userAvatar").value="";
        }
    }
    function changeUserInfo() {
        var formData = new FormData($("#userInfo")[0]);
        $.ajax({
            url:'/user/changeInfo',
            type:'POST',
            data: formData,
            processData:false,
            contentType:false,
            success:function () {
                loadPage('/user/toUserInfo');
            },
            error: function (req, status, error) {
                alert("请求错误！！");
            }
        })

        
    }

</script>
</body>
</html>